<!-- 相册中的图片 -->
<template>
  <div>
    <NuxtLayout name="home-page" :dailyImage="state.dailyImages" :title="state.title">
      <AnnLoading :loading="loading">
        <div class="flex flex-wrap justify-center gap-10 m-10" ref="allImagesElement" v-if="totalNum > 0">
          <div v-for="(item, index) in photos" :key="item.photoId"
               class="card w-80 h-56 cursor-pointer bg-base-200 shadow-xl image-full"
               @click="showImg(index)">
            <figure class="h-56">
              <img :src="item.photoImage" alt="photoImage" class="object-contain w-full h-full"/>
            </figure>
            <div class="card-body">
              <p>{{ item.photoDesc }}</p>
            </div>
          </div>
        </div>
        <AnnEmptyPage v-else/>
      </AnnLoading>
      <!-- 翻页按钮 -->
      <AnnPagination
          :totalNum="totalNum"
          :totalPages="totalPages"
          :pageSize="queryParams.pageSize"
          :pageNum="queryParams.pageNum"
          @changePage="changePage"
      />
    </NuxtLayout>
  </div>
</template>
<script setup lang="ts">
import type {BlogPhotoWebVO} from "~/api/photo/types";
import {queryPhotoList} from "~/api/photo";
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
import type {BlogAlbumWebVO} from "~/api/album/types";

useHead({
  title: "照片列表"
});
// 固定页面信息
const state = reactive({
  dailyImages: [{
    imageUrl: ""
  }],
  title: ""

})
const loading = ref(true)
const route = useRoute();
const allImagesElement = ref<HTMLElement>();
const queryParams: PageQuery = reactive({
  pageNum: 1,
  pageSize: 12,
});
const totalNum = ref();
const totalPages = ref(1);
const photos = ref<BlogPhotoWebVO[]>();
// 查询图片方法
const handlePhotoList = async (queryParams: PageQuery) => {
  loading.value = true
  const {albumId} = route.params;
  const newQueryParams = {...queryParams, albumId};

  const {data: res} = await useAsyncData("indexPhotoList", () =>
      queryPhotoList(newQueryParams)
  );
  photos.value = res.value?.rows;
  totalNum.value = res.value?.total;
  totalPages.value = Math.ceil(totalNum.value / queryParams.pageSize);

  const albumInfo = res.value?.otherInfo as BlogAlbumWebVO;
  state.dailyImages[0].imageUrl = albumInfo.albumImage;
  state.title = albumInfo.albumName;
  loading.value = false
};
const changePage = async (pageNum: number) => {
  queryParams.pageNum = pageNum
  await handlePhotoList(queryParams)
}
handlePhotoList(queryParams);

// 点击预览图片
const showImg = (index: number) => {
  const viewer = new Viewer(allImagesElement.value as HTMLElement, {
    initialViewIndex: index,
    hide: () => {
      viewer.destroy();
    },
  });
  viewer.show();
};

const prevPage = () => {
  if (queryParams.pageNum > 1) {
    queryParams.pageNum--;
    handlePhotoList(queryParams);
  }
};
const goToPage = (pageNum: number) => {
  if (queryParams.pageNum <= totalPages.value) {
    queryParams.pageNum = pageNum;
    handlePhotoList(queryParams);
  }
};
const nextPage = () => {
  if (queryParams.pageNum < totalPages.value) {
    queryParams.pageNum++;
    handlePhotoList(queryParams);
  }
};
</script>
<style lang="less" scoped>
.card {
  position: relative;
  overflow: hidden; /* 设置溢出隐藏 */
}

.card img {
  transition: transform 0.3s ease-in-out; /* 添加缩放过渡效果 */
}

.card:hover img {
  transform: scale(1.1); /* 悬停时缩放图片 */
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.5);
  transition: opacity 0.4s ease-in-out;
}

.card:hover::before {
  opacity: 1;
}

.card::after {
  content: attr(data-text);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 16px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.card:hover::after {
  opacity: 1;
}
</style>
